<template>
    <div class="timeReview">
         <div class="pageTitle" > 
            <span @click="goBack" class="goBack">{{'<'}}</span>
            时光机 
        </div>

        <ul class="historyTimeList">
            <li>
                <span class="time">2024年</span>
                <span>时光机</span>
            </li>
            <li>
                <span class="time">2025年</span>
                <span>时光机</span>
            </li>
        </ul>

    </div>
</template>

<script setup lang="ts">

const goBack=()=>{
    console.log('1')
    history.back()
}

</script>

<style lang="less" scoped>
.timeReview{
    padding: 15px;
    font-size: 18px;
    box-sizing: border-box; 
    min-height: calc(100vh - 30px);

    .pageTitle{
        position: relative;
        font-size: 30px;
        .goBack{
            position: absolute;
            left: 0;
            text-align: left;
        }
    }

    .historyTimeList{
        display: flex;
        flex-direction: row;
        gap: 40px;

        li{
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 20px 15px;

            background-image: url('@/assets/imgs/book.png');
            background-repeat: no-repeat;
            background-size: 100% 100%; 
            .time{
                font-size: 20px;
            }
        }
    }
}

</style>